<template>
  <el-drawer v-model="model" append-to-body @close="handleClose">
    <template #header>{{ props.title }}</template>
    <div class="container">
      <div class="content">
        <div class="title">{{ $t("goods_attribute.copied_goods_type") }}</div>
        <div class="item">
          <el-select
            v-model="state.copyTypeId"
            class="qf_select"
            :placeholder="$t('goods_attribute.select_goods_type')"
            :remote-method="queryCopyTypeOptions"
            filterable
            remote
            remote-show-suffix
            @change="queryCopyPropOptions"
          >
            <el-option v-for="option in state.copyTypeOptions" :value="option.value" :label="option.label" />
          </el-select>
          <span>{{ $t("merak.radio") }}</span>
        </div>
        <div class="item">
          <el-select
            v-model="state.copyPropId"
            class="qf_select"
            :placeholder="$t('goods_attribute.select_goods_property')"
            :disabled="disabled"
            :loading="state.copyPropLoading"
            filterable
            multiple
          >
            <el-option v-for="option in state.copyPropOptions" :value="option.value" :label="option.label" />
          </el-select>
          <span>{{ $t("merak.checkbox") }}</span>
        </div>
        <div class="title">{{ $t("goods_attribute.copy_to_goods_type") }}</div>
        <div class="item">
          <el-select
            v-model="state.copyToTypeId"
            class="qf_select"
            :placeholder="$t('goods_attribute.select_goods_type')"
            :disabled="disabled"
            :remote-method="queryCopyToTypeOptions"
            filterable
            remote
            remote-show-suffix
          >
            <el-option v-for="option in state.copyToTypeOptions" :value="option.value" :label="option.label" />
          </el-select>
          <span>{{ $t("merak.radio") }}</span>
        </div>
      </div>
      <div class="tip">{{ $t("goods_attribute.copy_property_tip") }}</div>
    </div>
    <template #footer>
      <div style="text-align: right">
        <el-button @click="model = false">{{ $t("merak.cancel") }}</el-button>
        <el-button type="primary" :loading="loading" :disabled="saveDisabled" @click="handleCopy">
          {{ $t("merak.confirm") }}
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref, reactive, computed } from "vue";

import { ElMessage, ElDrawer, ElButton, ElSelect, ElOption } from "element-plus";

import { RouteType, TabType } from "@/api/modules/goodsArchive/allocation";

import { ResultEnum } from "@/enums/httpEnum";
import { StandOptionType, getGoodsAttribute, copyGoodsAttribute } from "@/api/modules/goodsArchive/allocation";

import { confirmWarningMsg } from "@/utils/messageUtils";

const props = defineProps<{ type: RouteType; tab: TabType; title?: string; options: StandOptionType[] }>();

const model = defineModel<boolean>({ default: false });

const currentInstance = getCurrentInstance();

const loading = ref(false);

const state = reactive<{
  // 被复制目标
  copyTypeId?: string | number;
  copyTypeOptions: StandOptionType[];
  copyPropId?: Array<string | number>;
  copyPropLoading?: boolean;
  copyPropOptions: StandOptionType[];
  // 复制目标
  copyToTypeId?: string | number;
  copyToTypeOptions: StandOptionType[];
}>({
  copyPropLoading: false,
  copyTypeOptions: [],
  copyPropOptions: [],
  copyToTypeOptions: []
});

const disabled = computed(() => typeof state.copyTypeId === "undefined");

const saveDisabled = computed(
  () =>
    typeof state.copyTypeId === "undefined" ||
    typeof state.copyToTypeId === "undefined" ||
    Array.isArray(state.copyPropId) === false ||
    state.copyPropId?.length === 0
);

// 搜索被复制的类型下拉列表
const queryCopyTypeOptions = async (queryString: string) => {
  state.copyTypeOptions = !!queryString ? props.options.filter(option => option.label.includes(queryString)) : [];
};

// 商品属性即搜
const queryCopyPropOptions = async (value: string) => {
  if (!value) return;
  state.copyPropLoading = true;
  state.copyPropId = undefined;
  await getGoodsAttribute[props.tab](props.type, value).then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      state.copyPropOptions = data;
    }
  });
  state.copyPropLoading = false;
};

// 搜索复制目标的下拉列表
const queryCopyToTypeOptions = async (queryString: string) => {
  state.copyToTypeOptions = !!queryString
    ? props.options.filter(option => option.label.includes(queryString) && option.value !== state.copyTypeId)
    : [];
};

// 保存复制
const handleCopy = () => {
  confirmWarningMsg({
    msg: currentInstance?.proxy?.$t("goods_attribute.copy_property_message") ?? "",
    callback: async (status: string) => {
      if (status === "confirm") {
        loading.value = true;
        await copyGoodsAttribute[props.tab](props.type, state.copyTypeId!, state.copyToTypeId!, state.copyPropId!).then(
          ({ code, message }) => {
            if (code == ResultEnum.SUCCESS) {
              model.value = false;
              ElMessage.success(currentInstance?.proxy?.$t("goods_attribute.copy_property_success"));
            } else {
              const msg = typeof message === "string" ? message : Object.values(message)?.[0];
              ElMessage.error(msg);
            }
          }
        );
        loading.value = false;
      }
    }
  });
};

// 关闭清空表单
const handleClose = () => {
  state.copyTypeId = undefined;
  state.copyPropId = undefined;
  state.copyToTypeId = undefined;
};
</script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: var(--merak-text-size);
  & > :first-child {
    flex: 1;
    min-width: 0;
    margin-bottom: var(--merak-space);
  }
  .content {
    & > .title:not(:first-child) {
      margin-top: 30px;
    }
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: var(--merak-padding);
      & > span {
        flex-shrink: 0;
        margin-left: var(--merak-space);
        color: var(--el-color-primary);
      }
    }
  }
  .tip {
    color: var(--el-color-info);
    font-size: 12px;
    font-style: italic;
  }
}
</style>
